{extend name="common:base" /}

{block name="main"}
<!--body wrapper start-->
<div class="wrapper">
    <div class="pull-left">
        <a href="javascript:history.go(-1)" data-toggle="tooltip" title="" class="btn btn-default" data-original-title="返回"><i class="fa fa-reply"></i></a>
    </div>
    <div class="row">
        <div class="col-md-12">
            <!--breadcrumbs start -->
            <ul class="breadcrumb panel">
                <li><a href="{:url('Index/index')}"><i class="fa fa-home"></i> 控制台</a></li>
                <li><a href="{:url('index')}">礼物音乐</a></li>
                <li class="active">添加音乐</li>
            </ul>
            <!--breadcrumbs end -->
        </div>
    </div>

    <div class="panel-body">
        <form method="post" action="" class="form-horizontal bucket-form">
            <div class="form-group">
                <label class="col-sm-1 control-label">音乐名称</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" name="music_name" value="" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">作者名称</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" name="music_auth" value="" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">音乐价格</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" name="music_price" value="" required >
                </div>
            </div>
            <div class="form-group ">
                <label class="col-sm-1 control-label">音频</label>
                <div class="col-sm-11">
                    <p class="bor_b left mg_tb10" id="demo3">
                        <audio src="" class="first" controls="controls">
                            您的浏览器不支持 audio 标签。
                        </audio>
                    <p class="bor_b left mg_tb10" >
                        <input type="file" id="file" class="playUrl"   src=""/>
                    </p>
                    <p class="bor_b left mg_tb10" >
                        <button class="btn btn-success qiniu">点击上传</button>
                        <input type="hidden" class="second" name="music_url" value=""/>
                    </p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label"></label>
                <div class="col-lg-10 right">
                    <button class="btn btn-primary " target-form="bucket-form"  type="submit">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!--body wrapper end-->
{/block}
{block name="js"}
<!--以下是在线编辑器 代码 -->
<script type="text/javascript" src="__JS__/layer/layer.js"></script>
<script type="text/javascript" src="https://unpkg.com/qiniu-js@v2.4.0/dist/qiniu.min.js"></script>
<script type="text/javascript" src="__JS__/jquery.validate.min.js"></script>
<!--<script type="text/javascript" src="__JS__/validation-init.js"></script>-->
<script>
    $.validator.setDefaults({
        submitHandler: function() {

        }
    });
</script>
<script>
$('.qiniu').click(function () {
        var btn = $(this);
        btn.attr('disabled', 'disabled');
        layer.msg('上传中', {
            icon: 16
            ,shade: [0.3,'#999999'],
            time:21600000
        });
        var token = "{$token}";
        var file = $('#file')[0].files[0];
        var index = file.name.lastIndexOf(".");
        var ext = file.name.substring(index);

        var key = takeName('vod',2)+ext;
        var config = {
        useCdnDomain: true,
        region: qiniu.region.z0
        };
        var putExtra = {
        fname: file.name,
        params: {},
        mimeType:  null
        };
        var observer = {
            next(res){
                $('.layui-layer-padding').html('<i class="layui-layer-ico layui-layer-ico16"></i>上传中 '+res.total.percent.toFixed(2)+'%');
            },
            error(err){
                layer.msg('上传失败,请稍后重试'+err.message, {icon: 5, time: 2000});
                layer.closeAll("loading");
                btn.attr('disabled', false);
            },
            complete(res){
                var domain = "{$domain}";
                var url = domain+'/'+res.key;
                $(".first").attr('src',url);
                $(".second").val(url);
                layer.msg('上传成功', {icon: 1, time: 2000});
                layer.closeAll("loading");
                btn.attr('disabled', false);
            }
        };
    var observable = qiniu.upload(file, key, token, putExtra, config);
    var subscription = observable.subscribe(observer);

});
function takeName(name,len) {
    var Name = '';
    var myDate = new Date();
    var myTime = myDate.getFullYear()+myDate.getMonth()+myDate.getDate()+myDate.getHours()+myDate.getMinutes()+myDate.getSeconds();
    len = len || 1;
    if (name != ''){
        Name += name;
    }
    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var maxPos = chars.length;
    for (i = 0; i < len; i++) {
        Name += chars.charAt(Math.floor(Math.random() * maxPos));
    }
    Name += myTime+Math.ceil(Math.random()*9999).toString();
    return Name;
}
</script>
{/block}
